import { getCinemaFilmScheduleList } from "@/services/cinema";
import { Tabs } from "antd-mobile";
import dayjs from "dayjs";
import React, { FC, useEffect, useMemo, useState } from "react";
import { useRequest } from "umi";

interface IProps {
  cinemaId: number;
  film: IFilm;
}

const FilmSchedules: FC<IProps> = ({ cinemaId, film }) => {
  console.log("film", film, cinemaId);

  // [1676563200, 1676649600]   => [{key: 1676563200, title: '2月24日'}, {key: 1676649600, title: '2月25日'}]

  const tabs = useMemo(() => {
    // date 是秒的单位
    return film.showDate.map((date) => ({
      key: date,
      title: dayjs(date * 1000).format("MM月DD日"),
    }));
  }, [film]);

  const [date, setDate] = useState(film.showDate[0]);

  // 当film切换时，要重置 date 为当前film的时间
  useEffect(() => {
    setDate(film.showDate[0]);
  }, [film]);

  const { data } = useRequest(
    () => getCinemaFilmScheduleList(cinemaId, film.filmId, date),
    {
      refreshDeps: [cinemaId, film.filmId, date],
      // cacheKey: "hello",
    }
  );

  console.log("tabs", tabs);

  return (
    <div>
      <Tabs
        activeKey={"" + date}
        onChange={(key: any) => {
          setDate(key);
        }}
      >
        {tabs.map((tab) => (
          <Tabs.Tab key={tab.key} title={tab.title}></Tabs.Tab>
        ))}
      </Tabs>
      {data && (
        <>
          <p>{data.schedules.length}</p>
          <ul>
            {data.schedules.map((item) => {
              return (
                <li key={item.scheduleId}>
                  <p>开始时间：{dayjs(item.showAt * 1000).format("HH:mm")}</p>
                  <p>结束时间：{dayjs(item.endAt * 1000).format("HH:mm")}</p>
                </li>
              );
            })}
          </ul>
        </>
      )}
    </div>
  );
};

export default React.memo(FilmSchedules);
